// 定义懒加载插件
import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
  // 插件安装 
  // app：vue实例
  install(app){
    // 自定义指令
    app.directive('img-lazy', {
      // mounted 钩子函数，全部子节点都挂载完成后调用
      mounted (el, binding){
        // el: 指令绑定的那个元素 img
        // binding: binding.value  指令等于号后面绑定的表达式的值  图片url
        const { stop } = useIntersectionObserver(
          el,
          ([{isIntersecting}]) => {
            if(isIntersecting){
              el.src = binding.value
              stop()
            }
          }
        )
      }
    })
  }
}